<template>
  <div class="setting-info">
    <div class="custom-title setting-info-title"><span>我的收货地址</span><el-button icon="Plus"
        @click="handleEditAddress">新增地址</el-button></div>
    <div class="setting-info-box" :loading="address.loading">
      <el-row :gutter="10" class="list-header">
        <el-col :span="2">
          <div class="item-th">收货人</div>
        </el-col>
        <el-col :span="3">
          <div class="item-th">电话/手机</div>
        </el-col>
        <el-col :span="3">
          <div class="item-th">所在地区</div>
        </el-col>
        <el-col :span="11">
          <div class="item-th">详细地址</div>
        </el-col>
        <el-col :span="5">
          <div class="item-th">操作</div>
        </el-col>
      </el-row>
      <template v-if="address.dataList.length">
        <el-row :gutter="10" class="list-body" v-for="(item, index) in address.dataList" :key="index">
          <el-col :span="2">
            <div class="item-td">{{ item.consignorName }}</div>
          </el-col>
          <el-col :span="3">
            <div class="item-td">{{ item.phone }}</div>
          </el-col>
          <el-col :span="3">
            <div class="item-td">{{ item.city }}</div>
          </el-col>
          <el-col :span="11">
            <div class="item-td">{{ addressDisplay(item) }}</div>
          </el-col>
          <el-col :span="5">
            <div class="item-td">
              <el-button size="small" type="primary" @click="handleEditor(item)" text>编辑</el-button>
              <el-button size="small" type="info" v-if="item.isDefault === 'N'" @click="handleDelete(item)"
                text>删除</el-button>
              <el-button size="small" type="danger" @click="handleSetDefault(item)" text
                v-if="item.isDefault === 'N'">默认地址</el-button>
            </div>
          </el-col>
        </el-row>
      </template>
      <el-empty v-else-if="!address.dataList.length && !address.loading" description="暂无数据" />
    </div>
    <!-- <el-pagination class="pagination" v-model:current-page="address.queryData.pageNum" :page-size="address.queryData.pageSize"
      layout="total, prev, pager, next" :total="address.total" @current-change="handleCurrentChange" /> -->
    <addressForm ref="dataFormRef" @change="bindChangeList"></addressForm>
  </div>
</template>

<script setup name="addressWidget">
import useAddressStore from '@/components/webCustom/address'
import addressForm from './components/addressForm'
const dataFormRef = ref(null)
const address = useAddressStore()
const addressDisplay = (item) => {
  return `${item.province || ''}${item.city || ''}${item.district || ''}${item.address || ''}`
}
const handleCurrentChange = (val) => {
  address.queryData.pageNum = val
  address.setList()
}

address.init()
const bindChangeList = (val) => {
  address.setList()
}
const handleEditAddress = () => {
  dataFormRef.value.show()
}
const handleEditor = (item) => {
  dataFormRef.value.show()
  dataFormRef.value.$nextTick(() => {
    dataFormRef.value.setDefault(item)
  })
}
const handleDelete = (item) => {
  address.deleteAddress(item)
}
const handleSetDefault = (item) => {
  address.setAddressDefault(item)
}
</script>

<style lang="scss" scoped>
.setting-info {
  width: 100%;

  &-title {
    font-size: var(--jbc-font-size-extra-large);
    display: flex;
    justify-content: space-between;
  }

  .setting-info-box {
    margin-top: 20px;
    width: 100%;
  }

  .list-header {
    background: #F8F8F8;
    border-radius: 8px;

    .item-th {
      font-weight: bold;
      font-size: var(--jbc-font-size-medium);
      color: var(--jbc-font-color);
      line-height: 22px;
      padding: 16px 0;
      text-align: center;
    }
  }

  .list-body {
    border: 1px solid #F0F0F0;
    border-radius: 8px;
    margin-top: 10px;

    .item-td {
      font-size: var(--jbc-font-size-medium);
      color: var(--jbc-font-color);
      line-height: 22px;
      padding: 16px 0;
      text-align: center;
    }
  }

  .pagination {
    margin-top: 20px;
    justify-content: center;
  }
}
</style>